<template>
  <div class="kuqu">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">退货管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen()">
          新增</el-button>
      </div>
      <s-table
        :table="table"
        :expand="false"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <!--<el-button type="info" size="mini" icon="edit" @click="tableEdit(s.row)"></el-button>-->
          </template>
        </el-table-column>
        <el-form-item label="退货单号" prop="thdh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_thdh"
                    placeholder="退货单号" spellcheck="false" auto-
                    capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="退货入库单号" prop="rkdh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_rkdh"
                    placeholder="退货入库单号" spellcheck="false" auto-
                    capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}退货单</p>
      <div class="__table">
        <el-button @click="dialogAddMxOpen('add')"
                   class="__table_button"><i class="el-icon-plus"></i></el-button>
      </div>
      <s-table :table="tableAdd" ref="tableAdd" @http="tableWatch"
               :control="false" :pagination="false"></s-table>
      <el-button slot="footer" @click="dialogMakeOpen">制作</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogAddMx" :close="dialogAddMxInit">
      <p slot="title">{{dialogAddMx.title}}退货单</p>
      <s-table :table="tableAddMx" ref="tableAddMx" @http="tableWatch"
               :expand="false" :multiSelect="true">
        <el-form-item label="联系人" prop="lxr">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAddMx_lxr"
                    placeholder="联系人" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="SO编号" prop="sobh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAddMx_sobh"
                    placeholder="SO编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="lxrdh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAddMx_lxrdh"
                    placeholder="联系方式" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="xxdz">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAddMx_xxdz"
                    placeholder="详细地址" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
      <el-button slot="footer" @click="dialogAddMxSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogMake" :close="dialogMakeInit">
      <s-form :form="formDialogMake" ref="formDialogMake">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="wldh" label="快递单号">
              <el-input
                type="text"
                v-model="formDialogMake.wldh"
                placeholder="快递单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="asnLxid" label="收发类别">
              <el-select v-model="formDialogMake.asnLxid"
                         filterable
                         @change="dialogRemoteasnLxid"
                         placeholder="请输入类别名称">
                <el-option
                  v-for="item in dialogMake.wmsRejected"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
            <!--<el-form-item prop="asnLxid" label="收发类别">-->
              <!--<el-select v-model="formDialogMake.asnLxid"-->
                         <!--filterable-->
                         <!--placeholder="">-->
              <!--</el-select>-->
              <!--<el-option-->
                <!--:key="item.dictionaryid"-->
                <!--:label="item.value"-->
                <!--:value="item.dictionaryid">-->
              <!--</el-option>-->
              <!--&lt;!&ndash;-->
              <!--<el-input-->
                <!--type="text"-->
                <!--v-model="formDialogMake.asnLxid"-->
                <!--placeholder="收发类别"></el-input>-->
                <!--&ndash;&gt;-->
            <!--</el-form-item>-->
          </el-col>
        </el-row>
      </s-form>
      <s-table :table="tableMake" ref="tableMake" @http="tableWatch"></s-table>
      <el-button slot="footer" @click="dialogMarkSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';

  function __form () {
    return {
      mc: { value: '', rule: [ 'vNull' ], search: true },
      bz: { value: '', rule: [], search: false },
      dm: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }
  function __formMake () {
    return {
      wldh: { value: '', rule: [ 'vNull__change' ], search: true },
      asnLxid: { value: '', rule: [], search: false },
      dm: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }

  export default AutoVue({
    name: 'inOperation_returnGoods-FEcarWms',
    head: {
      'title': '退货管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台退货管理 查看退货信息' },
      ],
    },
    store: ['USER'],
    data: {
      table: {
        column: [
          {
            label: '退货单号',
            prop: 'thdh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '退货入库单号',
            prop: 'rkdh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '退货物流单号',
            prop: 'wldh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '备注',
            prop: 'bz',
            minWidth: '0px',
            cRemarks: '',
            search: false } ],
        url: '/wmsRejected/list',
        key: 'id',
        tableColumn: 4,
        muti: false,
      },
      formDialog: __form(),
      formDialogMake: __formMake(),
      dialog: {
        title: '新增',
        row: {},
        size: 'large',
      },
      tableAdd: {
        column: [
          { label: 'SO编号',
            prop: 'sobh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '订单类型',
            prop: 'ddlx',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: 'SO状态',
            prop: 'sozt',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '客户编号',
            prop: 'khbh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '客户名称',
            prop: 'khmc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '省',
            prop: 'sheng',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '市',
            prop: 'shi',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '详细地址',
            prop: 'xxdz',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '联系人',
            prop: 'lxr',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '联系电话',
            prop: 'lxrdh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '发运日期',
            prop: 'fyrq',
            minWidth: '0px',
            cRemarks: '',
            search: false } ],
        key: 'fyddid',
        tableColumn: 11,
      },
      dialogAddMx: {
        title: '新增',
        size: 'large',
      },
      tableAddMx: {
        column: [
          { label: 'SO编号',
            prop: 'sobh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: 'SO状态',
            prop: 'sozt',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '客户名称',
            prop: 'khmc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '联系人',
            prop: 'lxr',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '联系电话',
            prop: 'lxrdh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '省',
            prop: 'sheng',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '市',
            prop: 'shi',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '详细地址',
            prop: 'xxdz',
            minWidth: '0px',
            cRemarks: '',
            search: true } ],
        url: '/wmsRejected/soList',
        tableColumn: 8,
        option: {
          ids: [],
        },
      },
      dialogMake: {
        title: '制作',
        size: 'large',
        wmsRejected: '',
        dictionaryid: '',
      },
      tableMake: {
        column: [
          { label: 'SO编号',
            prop: 'sobh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '订单类型',
            prop: 'ddlx',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: 'SO状态',
            prop: 'sozt',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '客户编号',
            prop: 'khbh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '客户名称',
            prop: 'khmc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '货品编号',
            prop: 'hpbh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '货品名称',
            prop: 'hpmc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '货品批次',
            prop: 'pc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '可退货数量',
            prop: 'kthsl',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '退货数量',
            prop: 'thsl',
            minWidth: '0px',
            cRemarks: '',
            elInputNumber: {
              min: 1,
              controls: [false, true],
              max: 'kthsl',
            },
            search: false },
          { label: '省',
            prop: 'sheng',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '市',
            prop: 'shi',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '详细地址',
            prop: 'xxdz',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '联系人',
            prop: 'lxrxm',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '联系电话',
            prop: 'lxrdh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '发运日期',
            prop: 'fyrq',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '供应商',
            prop: 'gysmc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '生产日期',
            prop: 'scrq',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '失效日期',
            prop: 'sxrq',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '发运数量',
            prop: 'fysl',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '快递单号',
            prop: '',
            minWidth: '0px',
            cRemarks: '',
            search: false },
        ],
        url: 'wmsRejectedDetailed/list',
        tableColumn: 10,
      },
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
        this.tableClear('tableAdd');
      },
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      async dialogOpen () {
        // this.tableAdd.url = '/wmsRejected/soList';
        // this.tableWatch('tableAdd');
        this.dialog.visible = true;
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              await this.post('/wmslibraryarea/add', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            try {
              option.id = this.dialog.row.id;
              await this.post('/wmslibraryarea/edit', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      dialogAddMxInit () {
        this.tableClear('tableAddMx');
      },
      dialogAddMxOpen () {
        this.tableAdd.data.forEach(item => {
          console.log('item.id:' + item.id);
        });
        if (this.tableAdd.data.length === 0) {
          delete this.tableAddMx.option.ids;
          this.tableAddMx.url = '/wmsRejected/soList';
          this.tableWatch('tableAddMx');
        } else {
          let ids = [];
          this.tableAdd.data.forEach(item => {
            /* 累加id */
            ids.push(item.id);
            this.tableAddMx.option.ids = ids;
            this.tableAddMx.url = '/wmsRejected/soList';
            this.tableWatch('tableAddMx');
          });
        }
        this.dialogAddMx.visible = true;
      },
      async dialogAddMxSave () {
        if (this.dialogAddMx.title === '新增') {
          if (this.tableAddMx.multipleSelection.length < 1) {
            return this.$alert('请至少选择一个', '提示');
          } else {
            let bool = true;
            this.tableAddMx.multipleSelection.forEach(item => {
              this.tableAdd.data.forEach((value) => {
                if (item.sobh === value.sobh) {
                  this.$alert('已经存在：' + value.sobh, '提示');
                  this.dialogAddMx.visible = true;
                  bool = false;
                }
              });
            });
            if (bool) {
              this.tableAddMx.multipleSelection.forEach(item => {
                this.tableAdd.data.push(item);
                this.dialogAddMxInit();
                this.dialogAddMx.visible = false;
              });
            }
          }
        }
      },
      dialogMakeInit () {
        this.formDialogMake = {
          ...this.formDialogMake,
          ...this.ObjectClone(__formMake()),
        };
        this.resetFields('formDialogMake');
        this.tableClear('tableMake');
      },
      async dialogMakeOpen () {
        await AutoPromise([
          async () => {
            if (this.dialogMake.wmsRejected.length === 0) {
              this.dialogMake.wmsRejected = await this.post('/wmsRejected/getOrderTypeCk');
              console.log('2018:' + this.dialogMake.wmsRejected);
            }
          },
        ]);
        let ids = [];
        for (let item of this.tableAdd.data) {
          ids.push(item.id);
        }
        /* 接收后台返回的是table{[]}的数据的格式 */
        try {
          this.tableSetData('tableMake', await this.post('/wmsRejectedDetailed/list', {
            ids: ids,
          }));
          this.dialogMake.visible = true;
        } catch (err) {
          console.log(err);
        }
      },
      dialogRemoteasnLxid () {
        this.dialogMake.wmsRejected.forEach(value => {
          this.dialogMake.dictionaryid = value.dictionaryid;
          console.log(value.dictionaryid);
        });
      },
      dialogMarkSave () {
        this.VALIDATE('formDialogMake', async option => {
          // option.asnLxid = this.dialogMake.dictionaryid;
          let json = {
            wmsRejectedDetailedList: this.tableMake.data,
            ...option,
          };
          try {
            await this.post('/wmsRejected/add', json);
            this.dialogMakeInit();
            this.tableWatch('table');
            this.dialogMake.visible = false;
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
        });
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
</style>
